<div class="container-fluid" role="main">
    <div class="panel panel-default">
        <div class="panel-body">
            <div class="well well-lg text-center">
                <h1 id="kpContent"><?php echo $content['kpContent'] ?></h1>
                <p><span id="errorNumber"><?php echo $content['errorNumber'] ?></span>/<span id="displayNumber"><?php echo $content['displayNumber'] ?></span>
                    <input type="hidden" id="kid" value="<?php echo $content['kid'] ?>">
                </p>
            </div>
            <div class="text-center">
                <button button type="button" class="btn btn-success btn-lg" id="ok">不错</button>
                <button button type="button" class="btn btn-warning btn-lg go">不熟</button>
            </div>
        </div>
        <!-- end of .panel-body -->
    </div>
</div>
<!-- /container -->
<script>
function reload(argument) {
    $.getJSON('<?php echo site_url("learn/getLastCotent") ?>', function(data) {
        $('h1#kpContent').text(data.kpContent);
        $('span#errorNumber').text(data.errorNumber);
        $('span#displayNumber').text(data.displayNumber);
        $('input#kid').val(data.kid);
    });
}

function update() {
    $.post("<?php echo site_url('learn/updateDisplayTime')?>", {
        displayNumber: $('span#displayNumber').text(),
        kid: $('input#kid').val()
    }, function(data, status) {
        reload();
    });
}

function updateError() {
    $.post("<?php echo site_url('learn/updateErrorTime')?>", {
        displayNumber: $('span#displayNumber').text(),
        kid: $('input#kid').val()
    }, function(data, status) {
        reload();
    });
}

$(document).ready(function() {

    $('li.active').removeClass('active');
    $('li:contains("开始学习")').addClass('active');

    $('button#ok').click(function(event) {
        update();
    });

    $('button#go').click(function(event) {
        updateError();
    });
});
</script>
</body>

</html>
